<template>
  <div id="app">
    <button @click="componentName = 'page1'">page1</button>
    <button @click="componentName = 'page2'">page2</button>
    <button @click="componentName = 'page3'">page3</button>
    <component :is="componentName" />
  </div>
</template>

<script>
import Page1 from './pages/page1.vue';
import Page2 from './pages/page2.vue';
import Page3 from './pages/page3.vue';

export default {
  name: 'App',
  components: {
    Page1,
    Page2,
    Page3,
  },
  data() {
    return {
      componentName: 'page1',
    };
  }
}
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}
#app>div {
  height: 100%;
  width: 100%;
}
</style>
